<%@ page import="java.util.UUID" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>尚硅谷会员注册页面</title>
		<jsp:include page="/abstract/base-head.jsp"></jsp:include>
		<!-- 声明js代码书写 -->
		<script type="text/javascript">
			$(function () {
				// 给注册按钮绑定单击事件
				$("#sub_btn").click(function () {
					// 获取各个文本框的值
					var username = $("#username").val();
					var password = $("#password").val();
					var repwd = $("#repwd").val();
					var email = $("#email").val();
					var code = $("#code").val();
					// 进行验证
					var regUserName = /^[a-zA-Z0-9]{5,18}$/;
					var regPassword = /^[a-zA-Z0-9]{5,18}$/;
					var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

					// alert(username + " " + password + " " + repwd + " " + email + " " + code);
					if (!regUserName.test(username)) {
						$(".errorMsg").text("用户名格式不正确");
						return false;
					}

					if (!regPassword.test(password)) {
						$(".errorMsg").text("密码格式不正确");
						return false;
					}
					if (repwd != password) {
						$(".errorMsg").text("两次密码输入的值不一样");
						return false;
					}
					if (!regEmail.test(email)) {
						$(".errorMsg").text("邮箱格式不正确");
						return false;
					}
					if (code == "") {
						$(".errorMsg").text("请输入验证码");
						return false;
					}

					// 验证成功 提交表单
					return true;
				});
				/* 点击图片刷新验证码 */
				$("#imgBtn").click(function (){
					var url = "a.jpg?" + Math.random();
					$(this).prop("src",url);
				});

				/** 失去焦点之后 验证用户名是否可用  */
				$("#username").blur(function () {
					// 判断用户名是否符合规范 如果不符合 不再继续进行验证
					var username = $("#username").val();
					var regUserName = /^[a-zA-Z0-9]{5,18}$/;
					if (!regUserName.test(username)) {
						$(".errorMsg").text("用户名格式不正确");
						return false;
					}
					// ajax 验证用户名是否可用
					$.get("user?method=existsName&username=" + username,function(data) {
						$(".errorMsg").html(data);
					});
					/*$.ajax({
						type: "get",
						url: "user",
						data: "method=existsName&username" + username,
						dataType: "text",
						success: function(data){
							alert( "Data Saved: " + data );
							console.log(data);
						},
						error: function (data) {
							console.log(data);
							alert("err")
						}
					});*/
				});
			});
		</script>

	<style type="text/css">
		.login_form{
			height:420px;
			margin-top: 25px;
		}

	</style>
	</head>
	<%
		// token 防止用户重复提交 TODO 是什么影响了其多次生成
		String token = UUID.randomUUID().toString().replace("-","");
		session.setAttribute("token", token);
	%>
	<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="static/img/logo.gif" >
		</div>

			<div class="login_banner">

				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>

				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册尚硅谷会员</h1>
								<span class="errorMsg">
									<%--<%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>
									${msg}
								</span>
							</div>
							<div class="form">
								<form action="/user" method="post">
									<input type="hidden" name="token" value="<%=token%>">
									<input type="hidden" name="method" value="register">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名"
										   autocomplete="off" tabindex="1" name="username" id="username"
										   value="${param.username}" /> <%--<%=request.getParameter("username")==null?"":request.getParameter("username")%>--%>
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码"
										   autocomplete="off" tabindex="1" name="password" id="password" />
									<br />
									<br />
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码"
										   autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<br />
									<br />
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址"
										   autocomplete="off" tabindex="1" name="email" id="email"
									       value="${param.email}"/><%--<%=request.getParameter("email")==null?"":request.getParameter("email")%>--%>
									<br />
									<br />
									<label>验证码：</label>
									<input class="itxt" type="text" name="code" style="width: 120px;" id="code"/>
									<img id="imgBtn"  src="a.jpg" style="width:120px; height:39px;float: right; margin-right: 40px"><%--alt=""--%>
									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" />
								</form>
							</div>

						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
	</body>
</html>